<template>
  <div class="windowControllers">
    <!-- 版本标签 -->
    <div class="versionLabel">2.0</div>
    <div
      @click="controllOrder(data)"
      v-for="(data, index) in controllList"
      :key="index"
      class="button"
    >
      <img :src="require('@/assets/icon/' + data + '.png')" />
    </div>
  </div>
</template>
      
  <script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import { ElMessage } from "element-plus";
import pubsub from "pubsub-js";

import mainApi from "@/api/mainApi";

export default {
  name: "窗口显示控件",
  data() {
    return {
      controllList: ["minimization", "minimize", "cross"],
    };
  },
  setup() {
    // 窗口控制命令发送
    function controllOrder(data) {
      window.myApi.ipcRenderer.send(data);
      // console.log(`controllOrder:${data}`);
    }
    return { controllOrder };
  },
};
</script>
      
  <style lang="less" scoped>
@import "../less/variables.less";
.windowControllers {
  position: absolute;
  z-index: 999;
  right: 0.5%;
  top: 1%;
  display: flex;
  flex-direction: row;
  width: auto;

  > .button {
    position: relative;
    // display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin: 0 3px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #f7f9fc;
    > img {
      width: 18px;
    }
  }
  > .button:hover {
    cursor: pointer;
    border: 1px solid #ff99a0;
  }
}

.versionLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 3px 0;
  font-weight: bold;
  font-family: "Agency FB";
  border-radius: 5px;
  background-color: @red;
  color: white;
  margin-right: 5px;
}
</style>
      